/**
 * @Name:
 * @Author:
 * @Desc:  测试页面
 * @Date: 2020-12-04 09:34:54
 */
import React, { Component } from "react";
import { Icon, Switch, Modal } from "antd";
import $ from "jquery";

import "@/antd-theme.less";
import miment from "@/utils/miment";

import styles from "./styles.module.less";
const arr = [
  { code: 1, name: "秋山澪" },
  { code: 2, name: "田井中律" },
  { code: 3, name: "琴吹紬" },
  { code: 4, name: "平泽唯" },
  { code: 5, name: "中野梓" }
];
const time = JSON.stringify(new Date());
const timesNum = new Date().getTime();
console.log("time===", new Date().getTime());
const date = miment(new Date()).format("YYYY-MM-DD hh:mm:ss");
const datesNum = miment(timesNum).format("YYYY-MM-DD hh:mm:ss");

class Test extends Component {
  state = {
    value: 1,
    type: false,
    bannerHeight: 0,
    url: "",
    show: false,
    checked: true
  };

  componentDidMount() {
    // let url = `https://picsum.photos/2000/800/?image=${this.getRandomNumberByRange(1, 100)}`;
    let url = require("@/assets/img/bg.png");
    this.setState({ url }, () => {
      this.resize();
    });
    // ev.returnValue = "确定离开当前页面吗？";
    window.addEventListener("beforeunload", this.onUnload);
    window.addEventListener("beforereload", this.onReload);
    window.addEventListener("scroll", this.scrollTop);
    window.addEventListener("resize", this.resize);
    window.addEventListener("mousewheel", this.scrollFunc);
    this.scrollFunc();
    // this.beforeunload();
    // this.beforereload();
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.scrollTop);
    window.removeEventListener("resize", this.resize);
    window.removeEventListener("mousewheel", this.scrollFunc);
    window.removeEventListener("beforeunload", this.onUnload);
    window.removeEventListener("beforereload", this.onReload);
    // window.onbeforeunload = null;
    // window.onbeforereload = null;
  }
  /**
   * @name onUnload
   * @description 离开页面前
   */
  onUnload = (e) => {
    const ev = window.event || e;
    if (ev) {
      ev.returnValue = "是否关闭页面？";
    }
  };
  /**
   * @name onReload
   * @description 刷新页面前
   */
  onReload = (e) => {
    const ev = window.event || e;
    if (ev) {
      ev.returnValue = "是否刷新页面？";
    }
  };
  /**
   * @name resize
   * @description 浏览器窗口变化
   */
  resize = () => {
    console.log("resize");
    let bannerWidth = $("#banner").width();
    let bannerHeight = $("#banner").height();
    let clientWidth = document.documentElement.clientWidth || 217;
    $("#topbar").css("width", clientWidth - 200);
    let per = (bannerWidth / bannerHeight / 1.6).toFixed(2);
    let num = 100;
    //1-1.3
    if (per < 1) {
      num = 100;
    } else if (per >= 1 && per < 1.3) {
      num = per * 100;
    } else {
      num = 130;
    }
    $("#banner").css("background-size", `${num}% ${num}%`);
  };

  /**
   * @name scrollTop
   * @description 监听滑动条滚动距离
   */
  scrollTop = () => {
    // console.log('scroll')
    // 滚动的高度
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    this.resize();
    if (scrollTop > 0) {
      $("#topbar").addClass(styles.topBar_down);
      this.setState({ show: true });
    } else {
      $("#topbar").removeClass(styles.topBar_down);
      this.setState({ show: false });
    }
  };
  /**
   * @name getRandomNumberByRange
   * @description 获取随机数
   */
  getRandomNumberByRange = (start, end) => {
    return Math.round(Math.random() * (end - start) + start);
  };
  /**
   * @name goTop
   * @description 回到顶部
   */
  goTop = () => {
    $("html,body").animate({ scrollTop: 0 }, 200);
  };
  /**
   * @name checked
   * @description 开关
   */
  checked = (val) => {
    this.setState({ checked: val });
    if (val) {
      // document.getElementById("app").className = "themea";
      document.getElementById("theme").className = "themea";
    } else {
      // document.getElementById("app").className = "themeb";
      document.getElementById("theme").className = "themeb";
    }
  };

  scrollFunc = (e) => {
    let eva = e || window.Event;
    if (eva.wheelDelta) {
      //判断浏览器IE，谷歌滑轮事件
      if (eva.wheelDelta > 0) {
        //当滑轮向上滚动时
        //单次循环
        console.log("滑轮向上滚动");
      }
      if (eva.wheelDelta < 0) {
        //当滑轮向下滚动时
        console.log("滑轮向下滚动");
      }
    } else if (eva.detail) {
      //Firefox滑轮事件
      if (eva.detail > 0) {
        //当滑轮向上滚动时
        console.log("滑轮向上滚动");
      }
      if (eva.detail < 0) {
        //当滑轮向下滚动时
        console.log("滑轮向下滚动");
      }
    }
  };
  /**
   * @name testaa
   * @param {Number} total 分配总数
   * @param {Number} people 在线人数
   * @description 均分任务，剩余量从头分配
   */
  testaa = () => {};

  render() {
    const { url, show, checked } = this.state;
    return (
      <div className={styles.container} id="container">
        <div id="topbar" className={styles.topBar}>
          <div className={styles.websit_name}>站名</div>
          <div className={styles.websit_bar}>
            {arr.map((item) => (
              <span className={styles.websit_bar_title} key={item.code}>
                {item.name}
              </span>
            ))}
          </div>
        </div>
        <div className={styles.banner_out}>
          <div id="banner" className={styles.banner} style={{ background: `url(${url})` }}></div>
        </div>
        <div className={styles.content}>
          <h2>K-ON !</h2>
        </div>
        {show && (
          <div onClick={this.goTop} className={styles.gotop}>
            <Icon type="to-top" />
          </div>
        )}
        <Switch checkedChildren="☀" unCheckedChildren="🌙" checked={checked} onClick={this.checked} />
        {/**<Demo /> */}
        {this.testaa()}
        <div className="themea" id="theme">
          <p className="border_style">《轻音少女》是由日本漫画家kakifly创作的四格漫画作品。 </p>
          <p>
            自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《Manga
            Time Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。
          </p>
          <p className="boxshadow_style">
            其后，在《Manga Time Kirara Carat》2011年3月号宣布复刊 [1] ，漫画分为大学和高中两个故事分别进行，《Manga Time
            Kirara》2011年5月号连载平泽唯、秋山澪、田井中律、琴吹䌷四人的大学剧情，《Manga Time Kirara
            Carat》2011年6月号连载中野梓与其朋友的高中剧情，两个故事分别于《Manga Time Kirara》2012年7月号和《Manga Time Kirara
            Carat》2012年8月号同时完结，单行本于2012年10月12日和11月12日分别发行销售，分大学与高中共2卷。
          </p>
        </div>
        <codearea>
          <p>
            标准时间：
            <codes>
              {`new Date()`} = {time}
            </codes>
          </p>
          <p>
            时间戳：
            <codes>
              {`new Date().getTime()`} = {timesNum}
            </codes>
          </p>
          <p>
            标准时间转为年月日时分秒：
            <codes>
              {`miment(new Date()).format('YYYY-MM-DD hh:mm:ss')`} = {date}
            </codes>
          </p>
          <p>
            时间戳转年月日时分秒：
            <codes>
              {`miment(new Date().getTime()).format('YYYY-MM-DD hh:mm:ss')`} = {datesNum}
            </codes>
          </p>
          <p>
            年月日时分秒转为标准时间：
            <codes>
              {`miment(${date})`} = {JSON.stringify(miment(date))}
            </codes>
          </p>
          <p>
            年月日时分秒转为时间戳：
            <codes>
              {`miment(${date}).getTime()`} = {JSON.stringify(miment(date).getTime())}
            </codes>
          </p>
        </codearea>
      </div>
    );
  }
}

export default Test;
